<template>
	<view class="wallet">
		<view class="top">
			<view class="balance">账户余额（元）</view>
			<view class="balance1">
				<view class="">
					可用余额(元)
				</view>
				<view class="">
					保证金(元)
				</view>
				<view class="">
					冻结金额(元)
				</view>
			</view>
			<view class="balance2">
				<view class="detail" @click="deal">
					收支明细
				</view>
				<view class="detail" @click="account">
					账户说明
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="withdrawal" @click="withdrawal">
				余额提现
			</view>
			<view class="echarge" @click="recharge">
				充值账户
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: "wallet",
		data(){
			return{
				
			}
		},
		methods:{
			deal(){
				uni.navigateTo({
					url: "/pages/index/deal"
				})
			},
			account(){
				uni.navigateTo({
					url: "/pages/index/account"
				})
			},
			withdrawal(){
				uni.navigateTo({
					url: "/pages/index/withdrawal"
				})
			},
			recharge(){
				uni.navigateTo({
					url: "/pages/index/recharge"
				})
			},
		}
	}
</script>

<style scoped>
	.top{
		width: 94%;
		height: 370rpx;
		background: rgb(69,160,253);
		margin: 0 auto;
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	.balance{
		padding-top: 40rpx;
	}
	.balance1{
		display: flex;
		flex-direction: row;
		margin-top: 1%;
		justify-content: space-between;
	}
	.balance2{
		display: flex;
		flex-direction: row;
		    justify-content: space-between;
		    padding-left: 40px;
		    padding-right: 40px;
			margin-top: 5%;
	}
	.detail{
		width: 200rpx;
		height: 60rpx;
		border-radius: 20rpx;
		text-align: center;
		padding-top: 10rpx;
		background: rgb(150,197,246);
	}
	.bottom{
		margin: 0 auto;
		width: 94%;
		margin-top: 80%;
	}
	.withdrawal{
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(53,199,233) , rgb(30,141,255));
	}
	.echarge{
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(233,72,69) , rgb(236,125,108));
	}
</style>
